<template>
    <div class="school">
        <div class="video-bg">
            <img class="bg-img" src="~/assets/images/school/bj-tc.png" alt="" />
            <img
                class="bg-img2"
                src="~/assets/images/school/bj-tc.png"
                alt=""
            />

            <div class="video-con">
                <div class="top">
                    <div class="left">
                        <el-breadcrumb separator-class="el-icon-arrow-right">
                            <el-breadcrumb-item :to="{ path: '/' }"
                                >小竹首页</el-breadcrumb-item
                            >
                            <el-breadcrumb-item
                                v-if="!isInPay"
                                :to="{ path: '/school/vipzjkc' }"
                                >全站通会员专属课程</el-breadcrumb-item
                            >
                            <el-breadcrumb-item
                                v-else
                                :to="{ path: '/school/sckc' }"
                                >实操课程</el-breadcrumb-item
                            >
                            <el-breadcrumb-item>{{
                                selectVideo != null
                                    ? selectVideo.name
                                    : "秒懂财税"
                            }}</el-breadcrumb-item>
                        </el-breadcrumb>
                    </div>
                    <div class="right">
                        <div class="collection" @click="setCollect">
                            <i
                                v-if="selectVideo != null"
                                :class="[
                                    selectVideo.is_collect == 1
                                        ? 'el-icon-star-on'
                                        : 'el-icon-star-off',
                                ]"
                            ></i>
                            收藏
                        </div>
                        <div class="back" @click="back">
                            <i class="el-icon-arrow-left"></i>
                            返回课程列表
                        </div>
                    </div>
                </div>

                <div class="video-list">
                    <div class="video">
                        <video-dplayer
                            v-if="selectVideo != null"
                            ref="dplayer"
                            :url="selectVideo.video_file"
                            :pic="getOssUrl(selectVideo.cover_image)"
                            @play="playStart"
                        ></video-dplayer>
                    </div>
                    <div class="list">
                        <div class="title">
                            视频选集
                            <div>共{{ videoList.length }}节</div>
                        </div>
                        <div class="ji-list">
                            <el-menu
                                :default-active="defaultActive"
                                class="el-menu-vertical-demo"
                                background-color="#202127"
                                text-color="#fff"
                                active-text-color="#1C87F3"
                                @select="routerChang"
                            >
                                <template v-for="items in videoList">
                                    <template
                                        v-if="
                                            items.section &&
                                            items.section.length > 0
                                        "
                                    >
                                        <el-submenu
                                            :key="items.id"
                                            :index="items.id + ''"
                                        >
                                            <template slot="title">
                                                <span>{{ items.name }}</span>
                                            </template>
                                            <el-menu-item-group>
                                                <el-menu-item
                                                    v-for="item in items.section"
                                                    :key="item.id"
                                                    :index="item.id + ''"
                                                    >{{
                                                        item.name
                                                    }}</el-menu-item
                                                >
                                            </el-menu-item-group>
                                        </el-submenu>
                                    </template>
                                </template>
                            </el-menu>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <tabs v-model="tabsIndex" :list="tabsList"></tabs>

        <div class="relevant">
            <div class="left">
                <div class="abstract" v-html="base.abstract"></div>
            </div>

            <div class="right wx-gzh">
                <div class="title">
                    <img
                        src="~/assets/images/school/xgtj-icon.png"
                        alt="相关推荐"
                    />
                    限时<span>免费资料</span>
                </div>

                <div class="xgtj-list">
                    <div class="kc-list">
                        <div class="kc-item">
                            <img
                                src="~/assets/images/school/folder.png"
                                alt=""
                            />
                            初级课程
                        </div>
                        <div class="kc-item">
                            <img
                                src="~/assets/images/school/folder.png"
                                alt=""
                            />
                            中级课程
                        </div>
                        <div class="kc-item">
                            <img
                                src="~/assets/images/school/folder.png"
                                alt=""
                            />
                            CPA课程
                        </div>
                        <div class="kc-item">
                            <img
                                src="~/assets/images/school/folder.png"
                                alt=""
                            />
                            审计课程
                        </div>
                        <div class="kc-item">
                            <img
                                src="~/assets/images/school/folder.png"
                                alt=""
                            />
                            税务师课程
                        </div>
                        <div class="kc-item">
                            <img
                                src="~/assets/images/school/folder.png"
                                alt=""
                            />
                            实操课程
                        </div>
                    </div>
                    <div class="wx-gzh-but">扫码领取全部资料</div>
                    <div class="wx-gzh-img">
                        <img
                            src="https://xzcs-video.oss-cn-beijing.aliyuncs.com/pc/xzwd-gzh-code.png"
                            alt=""
                        />
                        微信扫一扫领取
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
// api
import {
    getCollegeDetailNew,
    getCollegeList,
    addCollegeComment,
    setCollect,
} from "@/assets/api/schoolApi.js";

import { mapState, mapMutations } from "vuex";
import { getanalysedata2 } from "@/assets/api/indexApi";
import videoDplayer from "@/components/school/videoDplayer.vue";
import commentItem from "@/components/school/commentItem.vue";

import tabs from "@/components/index/tabs.vue";
import { getOssUrl, goTopSmooth } from "@/assets/utils/utils.js";

export default {
    components: {
        videoDplayer,
        commentItem,
        tabs,
    },
    metaInfo() {
        return {
            title: this.mateInfo.title,
            meta: [
                { name: "keywords", content: "小竹,财税,小竹学院,财税热点" },
            ],
        };
    },
    layout: "home",
    data() {
        return {
            getOssUrl: getOssUrl,
            tabsIndex: 0,
            tabsList: [{ name: "评论" }],
            comment: "",

            videoList: [],

            commentList: [],

            videoIndex: null,
            selectVideo: null,

            base: {},

            likeList: [],

            mateInfo: {
                title: "财税热点",
            },

            defaultActive: "",

            isInPay: false,
        };
    },
    computed: {
        ...mapState("common", {
            userInfo: (state) => state.userInfo,
        }),
    },
    watch: {},
    mounted() {
        if (this.$route.query.type == "1") this.isInPay = true;
        this.setmenuIndex("60");
        this.getData();
        this.$nextTick(() => {
            goTopSmooth();
        });
    },
    methods: {
        ...mapMutations("common", ["setmenuIndex"]),

        async getData() {
            const res = await getCollegeDetailNew({
                id: this.$route.params.id.replace(".html", ""),
            });
            if (res.code == 1) {
                this.videoList = res.data.chapter;
                this.defaultActive = res.data.chapter[0].section[0].id + "";
                this.selectVideo = res.data.chapter[0].section[0];

                this.commentList = res.data.comment;
                this.videoIndex = 0;
                this.base = res.data.base;
                this.mateInfo.title =
                    "全站通会员专属课程-" + res.data.base.name;
                getanalysedata2({
                    m_id: 8,
                    code: "PF5",
                    type: 1,
                    describe: this.mateInfo.title,
                });
                // this.getList();
            }
        },

        routerChang(e) {
            for (let items of this.videoList) {
                for (let item of items.section) {
                    if (item.id == e) {
                        this.selectVideo = item;
                        this.$refs.dplayer.$refs.player.dp.switchVideo({
                            url: getOssUrl(item.video_file),
                            pic: getOssUrl(item.cover_image),
                        });
                        return;
                    }
                }
            }

            // this.$router.push({
            //     path: `/school/Certificate/${this.id}/${e}.html`,
            // });
        },

        // 获取相关推荐
        async getList() {
            // console.log(this.base.type)

            const res = await getCollegeList({
                type: 1,
                page: 1,
                limit: 10,
                rd_type: 0,
            });

            if (res.code == 1) {
                this.likeList = res.data.relevant;
            }
        },

        // 评论
        async addCollegeComment() {
            const res = await addCollegeComment({
                id: this.$route.query.id,
                info: this.comment,
            });
            this.comment = "";
            if (res.code == 1) {
                this.getComment();
            }
        },

        // 获取评论
        async getComment() {
            const res = await getCollegeDetail({
                id: this.$route.query.id,
            });
            if (res.code == 1) {
                this.commentList = res.data.comment;
            }
        },

        async setCollect() {
            const res = await setCollect({
                id: this.selectVideo.id,
            });
            if (res.code == 1) {
                this.selectVideo.is_collect == 1
                    ? (this.selectVideo.is_collect = 0)
                    : (this.selectVideo.is_collect = 1);
            }
        },

        // 切换视频
        switchVideo(item, index) {
            if (this.videoIndex == index) return;
            this.videoIndex = index;
            this.$refs.dplayer.$refs.player.dp.switchVideo({
                url: getOssUrl(item.video_file),
                pic: getOssUrl(item.cover_image),
            });
        },

        goTJ(item) {
            // let { href } = this.$router.resolve({
            //     path: "/School/SeeFAT",
            //     query: { id: item.id },
            // });
            // window.open(href, "_blank");
            this.$router.push({
                path: "/SeeFAT/" + item.id + "",
            });
        },

        // 开始播放
        playStart() {
            if (this.userInfo && this.userInfo.is_gpt_vip == 0) {
                this.$refs.dplayer.onPause();
                this.$message({
                    message: "仅限会员观看",
                    type: "warning",
                });
                return;
            }
            if (!this.userInfo) {
                this.$refs.dplayer.onPause();
                this.$router.push({
                    path: "/login",
                    query: {
                        url: window.location.pathname + window.location.search,
                    },
                });
                return;
            }
        },

        back() {
            this.$router.push({
                path: "/school/vipzjkc",
            });
        },
    },
};
</script>

<style lang="scss" scoped>
.video-bg {
    background: #0f0f1e;
    height: 700px;
    position: relative;
    overflow: hidden;

    .bg-img,
    .bg-img2 {
        position: absolute;
        width: 470px;
        height: 471px;
        z-index: 0;
    }

    .bg-img {
        top: 350px;
        left: -120px;
        transform: rotate(164deg);
    }

    .bg-img2 {
        top: -169px;
        right: -95px;
    }
}

.video-con {
    width: 1200px;
    padding: 25px 0;
    margin: 0 auto;
    position: relative;
    z-index: 1;

    .top {
        display: flex;
        justify-content: space-between;
        align-items: center;

        .right {
            font-size: 14px;
            color: #ffffff;
            display: flex;

            .collection {
                margin-right: 77px;
            }

            .el-icon-star-on {
                color: #e6a23c !important;
            }

            .collection,
            .back {
                cursor: pointer;
            }
        }
    }
}

.video-list {
    height: 571px;
    background: #000000;
    margin-top: 27px;
    display: flex;
    justify-content: center;

    .video {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .list {
        min-width: 308px;
        background: #202127;
        box-sizing: border-box;

        .title {
            display: flex;
            justify-content: space-between;
            align-items: center;
            font-size: 16px;
            font-weight: 500;
            color: #ffffff;
            border-bottom: 1px solid #303030;
            padding: 20px 22px;

            > div {
                font-size: 12px;
                color: #b9b9b9;
            }
        }

        .ji-list {
            padding: 0 5px;
            padding-right: 0;
            height: 508px;
            overflow-y: scroll;
            &::v-deep .el-submenu__title {
                overflow: hidden;
                text-overflow: ellipsis;
            }

            &::v-deep .el-menu-item {
                // word-wrap: break-word !important;
                white-space: normal;
                line-height: 1.5;
                display: flex;
                align-items: center;
                height: 55px;
            }

            .ji-item {
                line-height: 60px;
                height: 60px;
                border-bottom: 1px solid #2f2f2f;
                font-size: 14px;
                color: #ffffff;
                overflow: hidden;
                white-space: nowrap;
                text-overflow: ellipsis;
                -o-text-overflow: ellipsis;
                cursor: pointer;

                &:hover {
                    opacity: 0.8;
                }
            }

            &::-webkit-scrollbar {
                width: 4px;
            }

            &::-webkit-scrollbar-thumb {
                border-radius: 10px;
                // box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
                background: #2f2f2f;
            }

            &::-webkit-scrollbar-track {
                border-radius: 0;
            }
        }
    }
}

.relevant {
    width: 1200px;
    margin: 0 auto;
    margin-bottom: 66px;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;

    .left {
        width: 855px;
        background: #ffffff;
        border-radius: 10px;
        padding: 46px 37px;
        box-sizing: border-box;

        .user-comment {
            display: flex;
            align-items: center;

            .avatar {
                width: 50px;
                height: 50px;
                margin-right: 15px;
                display: flex;
                align-items: center;
                justify-content: flex-end;

                .img {
                    width: 36px;
                    height: 36px;
                    border-radius: 36px;
                    overflow: hidden;
                }
            }

            .comment-input {
                width: 633px;
                height: 43px;
                border-radius: 4px 4px 4px 4px;
            }

            .comment-but {
                margin-left: 15px;
            }
        }
    }

    .right {
        width: 325px;
        background-color: #ffffff;
        border-radius: 10px 10px 10px 10px;
        overflow: hidden;
        box-sizing: border-box;

        > .title {
            background-image: url("~/assets/images/school/xgtj-bg.png");
            height: 60px;
            background-size: 100% 100%;
            display: flex;
            align-items: center;
            font-size: 18px;
            font-weight: bold;
            color: #333333;

            span {
                color: #fa5151;
            }

            img {
                width: 25px;
                height: 25px;
                margin-right: 7px;
                margin-left: 32px;
            }
        }
    }
}

.xgtj-list {
    padding: 0 24px;
    padding-top: 7px;
}

.xgtj-item {
    cursor: pointer;
    display: flex;
    align-items: center;
    margin-bottom: 27px;

    &:hover .title {
        color: #1c87f3 !important;
    }

    .xgtj-img {
        min-width: 127px;
        height: 81px;
        border-radius: 4px 4px 4px 4px;
    }

    .info {
        padding-left: 18px;

        .title {
            font-size: 14px;
            color: #333333;
            height: 41px;
            line-height: 20px;
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
        }

        .other {
            font-size: 12px;
            color: #999999;
            padding-top: 20px;
        }
    }
}

.comment-list {
}

.kc-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    .kc-item {
        width: 90px;
        text-align: center;
        font-size: 15px;
        font-family: HarmonyOS Sans SC, HarmonyOS Sans SC;
        font-weight: 400;
        color: #333333;
        margin-bottom: 10px;
        img {
            width: 46px;
            height: 46px;
            margin: 0 auto;
            display: block;
            padding-top: 5px;
        }
    }
}

.wx-gzh-but {
    width: 258px;
    height: 45px;
    background: #ff8f1f;
    border-radius: 65px;
    font-size: 18px;
    font-family: HarmonyOS Sans SC, HarmonyOS Sans SC;
    font-weight: 500;
    color: #ffffff;
    line-height: 45px;
    text-align: center;
    margin: 23px auto;
}
.wx-gzh-img {
    text-align: center;
    font-size: 14px;
    font-family: HarmonyOS Sans SC, HarmonyOS Sans SC;
    font-weight: 400;
    color: #9e9e9e;
    padding-bottom: 20px;
    img {
        width: 157px;
        height: 157px;
        display: block;
        margin: 0 auto 7px;
    }
}

::v-deep .user-comment .el-input__inner {
    background: #f5f5f5;
    border-width: 0;
}

::v-deep .el-breadcrumb__item .is-link {
    font-size: 14px;
    color: #9e9e9e !important;
}

::v-deep .el-breadcrumb__inner {
    font-size: 14px;
    color: #ffffff !important;
}
</style>